/**
 * User: Suraj Pratap
 * Email: suraj.pratap24@gmail.com
 * Date: 03/08/13
 * Time: 9:24 PM
 */




function modelAlert(data, type, time){

    removeAlertBox();

    var $model_alert_box = createModelAlertBox(data);

    $('body').append($model_alert_box);

    $model_alert_box.show().animate({'top': '+=120px'}, 200);

    if( type && type == 'fluid' ){
        setTimeout(function(){
            $model_alert_box.animate({ 'top': '-=120px' }, 800, function(){ $(this).remove() });
        }, time);
    }

    if( type && type == 'error'){
        $model_alert_box.css({
            'color': 'red'
        });
    }

}

function removeAlertBox(){
    $('#model-alert-box').animate({ 'top': '-=120px' }, 200, function(){ $(this).remove() });
}

function createModelAlertBox(data){
    var $cross_button = $("<span id='model-alert-cross' >X</span>");

    $cross_button.css({
        'fontFamily': 'sans-serif',
        'float': 'right',
        'color': 'violet',
        'cursor': 'pointer'
    });

    var $alert_data = $("<div id='model-alert-data' >"+ data +"</div>");

    var $model_alert_box = $("<div id='model-alert-box'></div>");

    $model_alert_box.css({
        'position': 'fixed',
        'width': '60%',
        'top': '-100px',
        'left': '20%',
        'padding': '10px',
        'border': '1px lightgray solid',
        'border-radius': '6px',
        'box-shadow': '0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15)',
        'background-color': 'white',
        'display': 'none',
        'color': 'green'
    });

    return $model_alert_box.append($cross_button).append($alert_data);
}

// add events

$(document).ready(function(){
    $(document).on('mouseenter', '#model-alert-cross', function(){
        $(this).css({
            'color': 'red'
        });
    });

    $(document).on('mouseout', '#model-alert-cross', function(){
        $(this).css({
            'color': 'violet'
        });
    });

    $(document).on('click', '#model-alert-cross', function(){
        removeAlertBox();
    });
});